<template>
  <ul class="sidebar-menu tree" data-widget="tree">
    <li class="header">数据统计分析</li>
    <li @click="toggleMenu">
      <router-link to="/display/al"><i class="fa fa-users"></i>
        <span class="page">用户登陆数据</span>
      </router-link>
    </li>
    <li @click="toggleMenu">
      <router-link to="/display/dn"><i class="fa fa-phone"></i>
        <span class="page">设备新增活跃</span>
      </router-link>
    </li>
    <li @click="toggleMenu">
      <router-link to="/display/an"><i class="fa fa-child"></i>
        <span class="page">账号新增活跃</span>
      </router-link>
    </li>
    <li @click="toggleMenu">
      <router-link to="/display/ar"><i class="fa fa-user"></i>
        <span class="page">账号留存</span>
      </router-link>
    </li>
    <li @click="toggleMenu">
      <router-link to="/display/ud">
        <i class="fa fa-map"></i>
        <span class="page">用户分布</span>
      </router-link>
    </li>
    <li class="treeview menu-open">
      <router-link to="#">
        <i class="fa fa-cog"></i>
        <span>营收统计</span>
        <span class="pull-right-container">
          <i class="fa fa-angle-down pull-right"></i>
        </span>
      </router-link>
      <ul class="treeview-menu">
        <li @click="toggleMenu">
          <router-link to="/display/op">
            <i class="fa fa-cog"></i>
            <span class="page">订单价格梯度</span>
          </router-link>
        </li>
        <li @click="toggleMenu">
          <router-link to="/display/o">
            <i class="fa fa-cog"></i>
            <span class="page">订单销量</span>
          </router-link>
        </li>
        <li class="treeview menu-open">
          <router-link to="#">
            <i class="fa ion-leaf"></i>
            <span>商品统计</span>
            <span class="pull-right-container">
              <i class="fa fa-angle-down pull-right"></i>
            </span>
          </router-link>

          <ul class="treeview-menu">
            <li @click="toggleMenu">
              <router-link to="/display/oa">
                <i class="fa ion-ios-paperplane-outline"></i>
                <span class="page">面辅料属性分析</span>
              </router-link>
            </li>
            <li @click="toggleMenu">
              <router-link to="/display/oc">
                <i class="fa ion-ios-paperplane-outline"></i>
                <span class="page">成衣属性分析</span>
              </router-link>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li @click="toggleMenu">
      <router-link to="/display/du">
        <i class="fa fa-tasks"></i>
        <span class="page">使用设备</span>
      </router-link>
    </li>
    <li @click="toggleMenu">
      <router-link to="/display/fc">
        <i class="fa fa-cog"></i>
        <span class="page">面料功能</span>
      </router-link>
    </li>
  </ul>
</template>
<script>
import {setMenu} from '../../static/js/common/utils'

export default {
  name: 'SidebarName',
  mounted () {
    this.$nextTick(() => {
      setMenu()
    })
  },
  methods: {
    toggleMenu (event) {
      // console.log(event.toElement.parentElement)
      setMenu()
    }
  }
}
</script>
<style>
  /* override default */
  .sidebar-menu>li>a {
    padding: 12px 15px 12px 15px;
  }

  .sidebar-menu li.active>a>.fa-angle-left, .sidebar-menu li.active>a>.pull-right-container>.fa-angle-left {
    animation-name: rotate;
    animation-duration: .2s;
    animation-fill-mode: forwards;
  }

  @keyframes rotate {
    0% {
      transform: rotate(0deg);
    }

    100% {
      transform: rotate(-90deg);
    }
  }
</style>
